<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录界面</title>
 <style type="text/css">
  body{
  font-size:12px;
  line-height:25px;
  margin:0 auto;
  color:white;}
  #header{
  background-image:url(images/bg.gif);
  background-repeat:repeat-x;
  height:36px;
  }
  #headerLeft{  
  float:left;
  width:200px;
  }
  #headerRight{
  float:right;
  width:160px;
  }
  #main{
  margin:20px auto;
  background-color:lightgray;
  width:700px;
  text-align:center;
  }
 .righttd{
 text-align:right;
 width:100px;
 }
 .lefttd{
 text-align:left;
 width:400px;}
 table{
 align:center;
 color:black;}
 #btnSubmit{
 background-color:red;
 color:white;
 float:none;}
.red{
	color:red;
	float:left;	
}
input{
	float:left;
}

  </style>
 <script type="text/javascript">
 function check(){
	var obj=document.getElementById("number1");
	var objEmail=document.getElementById("number1").value;
	var obj1=document.getElementById("pwd");
	var objpwd=document.getElementById("pwd").value;
	var obj2=document.getElementById("confirm_pwd");
	var objcpwd=document.getElementById("confirm_pwd").value;

	if(objNumber1==""){
		alert("账号不能为空");
		obj.select();
		obj.focus();
		return false;
		}
	if(objNumber1.indexOf("@")==-1){
		alert("账号格式不正确");
		obj.select();
		obj.focus();
		return false;
		}
	if(objNumber1.indexOf(".")==-1){
		alert("账号格式不正确\n必须包含符合.");
		obj.select();
		obj.focus();
		return false;
		}
	if(objpwd==""){
		alert("密码不能为空");
		obj1.select();
		obj1.focus();
		return false;
		}
	if(objpwd.length<6){
		alert("密码长度不能小于6位");
		obj1.select();
		obj1.focus();
		return false;
		}	
	if(objpwd!=objcpwd){
		alert("两次输入的密码不一致");
		return false;
		}
var user=document.getElementById("user").value;	
        if(user==""){
		alert("姓名不能为空");
		return false;
		}
	for(var i=0;i<user.length;i++){
		var j=user.substring(i,i+1);
		if(isNaN(j)==false){
			alert("姓名中不能包含数字");
			return false;
			}
		}	
	return true;
	}
	function clearText(){
		var mail=document.getElementById("number1");
		if(mail.value=="请输入正确的账号格式"){
			mail.value="";
			mail.style.borderColor="#ff0000";
		}
	}
	function a2(){
			var mail=document.getElementById("confirm_pwd");
			if(mail.value=="请输入正确的密码"){
				mail.value="";
				mail.style.borderColor="#ff0000";
			}
		}
	function b2(){
	var obj=document.getElementById("confirm_pwd");
	var objEmail=document.getElementById("confirm_pwd").value;
	var objShow=document.getElementById("c2");
	if(objNumber1==""){
		objShow.innerHTML="确认密码不能为空";
		return false;
		}
	}
	function a3(){
			var mail=document.getElementById("user");
			if(mail.value=="请输入正确的姓名"){
				mail.value="";
				mail.style.borderColor="#ff0000";
			}
		}
	function b3(){
	var obj=document.getElementById("user");
	var objNumber1=document.getElementById("confirm_pwd").value;
	var objShow=document.getElementById("c3");
	if(objNumber1==""){
		objShow.innerHTML="姓名不能为空";
		return false;
		}
	}
 </script>
 </head>
 <body>
 <div id="header">
 <div id=headerLeft>政府页面</div>
 <div id=headerRight>注册|登录|帮助</div>
 </div>
 <div id="main">
 <table align="center" id="myTable" border="1" cellspacing="0" cellpadding="0" width="500px">
 <form method="post" action="success.html" name="myForm" onsubmit="return check()" on ><tr>
	<td colspan="2" style="color:black; font-size:18px;">用户登录</td>
 </tr>
 <tr>
	<td class="righttd" >账号</td>
	<td class="lefttd"><input type="text" name="" id="number1" value="请输入正确的账号格式" onFocus="clearText()" onBlur="checkEmail()"><div id="showEmail" class="red"></div></td>
 </tr>
 <tr>
	<td class="righttd" >密码:</td>
	<td class="lefttd"><input type="password" name="" id="pwd" value="" onFocus="a1()" onBlur="b1()"><div id="c1" class="red" ></td>
 </tr>
 <tr>
    <td class="righttd">确认密码:</td>
    <td class="lefttd"><input name="" type="password" id="confirm_pwd" value="" onFocus="a2()" onBlur="b2()"><div id="c2" class="red" ></td>
  </tr>
  <tr>
    <td class="righttd">姓名:</td>
    <td class="lefttd"><input name="" type="text" id="user" value="" onFocus="a3()" onBlur="b3()"><div id="c3" class="red" ></td>
  </tr>
 <tr>
    <td class="righttd">性别:</td>
    <td class="lefttd"><input style="float:none;" name="sex" type="radio" value="男" checked>男
    <input style="float:none;" name="sex" type="radio" value="女" >女</td>
  </tr>
  <tr>
    <td class="righttd">出生日期:</td>
    <td class="lefttd">
    <select name="year">
    <script type="text/javascript">
	for(var i=1900; i<=2017; i++){
		document.write("<option value="+i+">"+i+"</option>");
		}
	</script>
    </select>年
    
    <select name="month">
    <script type="text/javascript">
	for(var i=1; i<=12; i++){
		document.write("<option value="+i+">"+i+"</option>");
		}
	</script>
    </select>月
    
    <select name="day">
    <script type="text/javascript">
	for(var i=1; i<=31; i++){
		document.write("<option value="+i+">"+i+"</option>");
		}
	</script>
    </select>日   
    </td>
 <tr>
	<td colspan="2" align="center"><input type="submit" value="注册" id="btnSubmit">&nbsp;<input type="submit" value="登录" id="btnSubmit"></td>	
 </tr>
 </form>
 </table>
 </div>
 </body>
</html>
